﻿@model com.codeplex.eatoutadvocate.Web.Mvc.Models.EatOutModel
@{
	ViewBag.Title = "Record";
}
@section pagetitle {
    @ViewBag.Title
}

@section header{
    <link href="@Url.Content("~/Content/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrapjquery.css")" rel="stylesheet" type="text/css" />

}

<div class="form-signin">
    <div class="span11">
        <legend>Record Your Eat Out</legend>
    </div>
    <div class="span3">
        @using (Html.BeginForm("Index", "Record", FormMethod.Post))
        { 
            @Html.ValidationSummary(true)

              @Html.ValidationMessageFor(m => m.Restaurant)
                @Html.TextBoxFor(m => m.Restaurant, new { id = "restaurant", @class = "input-block-level", placeholder = "Restaurant Name", style = "width:100%" })
                
                @Html.HiddenFor(m => m.Mood, new { id = "mood" })
                    
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/300x200" alt="">
                </a>    
                
                <div class="moods">
                    <div class="btn-group" data-toggle="buttons-radio" style="margin: 0 auto; width:100%">
                      <button id="happy" type="button" class="btn">Happy</button>
                      <button id="neutral" type="button" class="btn">Neutral</button>
                      <button id="sad" type="button" class="btn">Sad</button>
                    </div>
                </div>
            
                @Html.HiddenFor(m => m.MoodLevel, new { id = "moodLevel" })
                    
                <div class="slider">
                    <div id="slider"></div>
                </div>

              @Html.ValidationMessageFor(m => m.ZipCode)
                @Html.TextBoxFor(m => m.ZipCode, new { id = "zipcode_textbox", @class = "input-block-level", placeholder = "Zip Code", style = "width:100%" })
       

                <input class="btn btn-info" type="submit" value="Record" />
 
        }
    </div>

    <div style="clear: both"></div>
   

</div>

@section footer {
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/location.js")" type="text/javascript" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#restaurant').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("GetRestaurants", "Record")',
                        dataType: "json",
                        type: 'POST',
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item, value: item };
                            }))
                        }
                    });
                },
                minLength: 3
            });
            $('#happy').live('click', function () {
                $('#mood').val(1);
            });
            $('#neutral').live('click', function () {
                $('#mood').val(2);
            });
            $('#sad').live('click', function () {
                $('#mood').val(3);
            });
            $(function () {
                $("#slider").slider({
                    value: 1,
                    min: 1,
                    max: 3,
                    step: 1,
                    slide: function (event, ui) {
                        $("#moodLevel").val(ui.value);
                    }
                });
                $("#moodLevel").val($("#slider").slider("value"));
            });
        });
        
    </script>
}

